 <%- include('header')%>


 <!-- 巨幕 -->
 <div class="jumbotron jumbotron-bg ">
   <div class="container">
     <div class="row">
       <div class="col-md-6 text-align-center">
         <h2 class="mt-30">
           欢迎来到<img class="va-b" src="./img/logo.png" alt="" height="54" />
         </h2>
         <h3>
           一个<span class="color-secondary">自由</span>、
           <span class="color-secondary">热情</span>和<span class="color-secondary">共享</span>的空间。
         </h3>
         <p>欢迎大家来灌水！！</p>
         <p>
           <a href="/post/create" class="btn btn-primary btn-lg navbar-btn br-30 pt-6 pb-6 bg-color-primary bd-color-primary outline-none color-white">
             <i class="glyphicon glyphicon-pencil mr-10"></i>写文章
           </a>
         </p>
       </div>

       <div class="col-md-6 hidden-xs hidden-sm">
         <img src="/img/featured.png" alt="" srcset="" />
       </div>
     </div>
   </div>
 </div>
 <!-- 巨幕结束 -->

 <!-- 热门文章 -->
 <div class="container hot-article">
   <h2 class="blog-title">热门文章</h2>
   <div class="row">
     <div class="col-md-12 col-lg-8">
       <div class="hot-article__item">
         <!-- 轮播图开始 -->
         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
           <!-- Wrapper for slides 轮播图项 -->
           <div class="carousel-inner" role="listbox">
             <div class="item active" style="background-image: url(./img/article1.jfif)">
               <div class="carousel-caption">文章</div>
             </div>
             <div class="item" style="background-image: url(./img/article2.jfif)">
               <div class="carousel-caption">文章2</div>
             </div>
             <div class="item" style="background-image: url(./img/article3.jpg)">
               <div class="carousel-caption">文章3</div>
             </div>
           </div>

           <!-- Controls 轮播图的控制按钮-->
           <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
             <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
             <span class="sr-only">Previous</span>
           </a>
           <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
             <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
             <span class="sr-only">Next</span>
           </a>
         </div>
         <!-- 轮播图结束 -->
       </div>
     </div>
     <%for(var i=0;i<4;i++){%>
     <div class="col-md-6 col-lg-4">
       <div class="hot-article__item">
         <div class="hot-article__img" style="background-image: url(/img/article2.jfif)"></div>
         <div class="hot-article__content">
           <div class="hot-article__title">
             让网页变成灰色？一行代码就够了！
           </div>
           <div class="hot-article__foot">
             <span class="tag">2021-09-13 15:27</span>
             <span>浏览(6)</span>
             <span>留言(1)</span>
           </div>
         </div>
       </div>
     </div>
     <% } %>
   </div>
 </div>
 <!-- 热门文章结束 -->

 <!-- 最新文章和最新评论 -->
 <div class="container">
   <div class="row">
     <!-- 最新文章 -->
     <div class="col-md-8 latest-article">
       <h2 class="blog-title">最新文章</h2>
       <div class="warp">
         <% posts.slice(0,5).forEach(post =>{ %>
         <%- include('post-list',{ post }) %>
         <% } )%>
       </div>
       <!-- 分页器开始 -->
       <%- include('pager',{count,limit:5,skip,page,async:true})  %>
       <script src="/js/ejs.min.js"></script>
       <script src="/js/paging.js"></script>
       <!-- 分页器结束 -->
     </div>

     <!-- 最新文章结束 -->
     <div class="col-md-4">
       <!-- 最新评论 -->
       <div class="latest-comment">
         <h2 class="blog-title">最新评论</h2>

         <%for(var i=0;i<4;i++){%>
         <div href="" class="latest-comment__item">
           <span class="latest-comment__avatar">
             <img src="/img/avatar1.png" />
           </span>
           <div class="latest-comment__content">
             <div class="latest-comment__header">
               <a class="latest-comment__author" href="#">xiaoming</a>
               <span class="latest-comment__date">2021-09-16 16:56</span>
             </div>
             <div class="latest-comment__text">
               <a href="/post">
                 <p>学习到了！</p>
               </a>
             </div>
           </div>
         </div>
         <% } %>
       </div>
       <!-- 最新评论结束 -->

       <!-- 热门博主 -->
       <div class="container-fluid hot-blogger">
         <div class="row">
           <h2 class="blog-title">热门博主</h2>
           <% for(var i=0;i<6;i++){ %>
           <div class="col-xs-2 col-md-4">
             <a href="#" class="hot-blogger__item">
               <img src="/img/avatar2.png" alt="" class="hot-blogger__avatar" />
             </a>
           </div>
           <% } %>
         </div>
       </div>
       <!-- 热门博主结束 -->
     </div>
   </div>
 </div>
 <%- include('footer')   %>
